import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from '@/store/aaaSlice.js'
import { Link, Outlet, useNavigate } from "react-router-dom";
import './index.css'

export default function App () {
    const bbb = useSelector(state => state.aaa.bbb)
    const dispatch = useDispatch()
    const navigate = useNavigate();

    return(
        <div className='app'>
            <div className='left'>
                <div>{bbb}</div>
                <button onClick={() => dispatch(increment())}>+</button>
                <button onClick={() => dispatch(decrement())}>-</button>
                <br />
                <button onClick={() => navigate('/page/a/666')}>跳转A</button>
                <Link to='page/b'>跳转B</Link>
            </div>
            <div className='right'>
                <Outlet></Outlet>
            </div>
        </div>
    )
}